<template>
  <ElRow :gutter="8">
    <ElCol :span="12">
      <ElDatePicker :placeholder="$t('common.startTime')" style="width: 100%;" ref="startTimeRef" v-model="startTime"
        :disabled-date="startDisabledDate" />
    </ElCol>
    <ElCol :span="12">
      <ElDatePicker  :placeholder="$t('common.endTime')"  style="width: 100%;" ref="endTimeRef" v-model="endTime" :disabled-date="endDisabledDate" />
    </ElCol>
  </ElRow>
</template>

<script setup lang="ts">
import dayjs, { Dayjs } from 'dayjs';
import { ref } from 'vue';



type DatePickerType = Date | undefined;
const startTime = defineModel<DatePickerType>('startTime', {
  default: undefined,
  required: true
})
const endTime = defineModel<DatePickerType>('endTime', {
  default: undefined,
  required: true
})

const props = defineProps({
  /**
   * 是否禁用未来时间(例如今天是2025年5月20日，默认会禁用2025年5月21日以及之后的时间)
   */
  disabledFuture: {
    type: Boolean,
    default: true
  }
})
/**
 * 禁用判断
 * @param current
 */
const startDisabledDate = (current: Dayjs) => {
  // 禁用未来日期（如果配置了disabledFuture）
  if (props.disabledFuture === true && current && current > dayjs().endOf('day')) {
    return true;
  }

  // 如果已选择结束日期，禁用结束日期之后的日期（但允许选择结束日期当天）
  if (current && endTime.value) {
    // 修改点：使用startOf('day')确保可以选同一天
    if (current > dayjs(endTime.value).startOf('day')) {
      return true;
    }
  }

  return false;
};

const endDisabledDate = (current: Dayjs) => {
  // 禁用未来日期（如果配置了disabledFuture）
  if (props.disabledFuture === true && current && current > dayjs().endOf('day')) {
    return true;
  }

  // 如果已选择开始日期，禁用开始日期之前的日期（但允许选择开始日期当天）
  if (current && startTime.value) {
    // 修改点：将endOf('day')改为startOf('day')，允许选择同一天
    if (current < dayjs(startTime.value).startOf('day')) {
      return true;
    }
  }

  return false;
};


const startTimeRef = ref();
const endTimeRef = ref();
// const reset=()=>{
//   startTime.value=undefined;
//   endTime.value=undefined;
// }
// //导出reset方法

</script>

<style scoped></style>
